<template>
	<view class="">
		<view class="content">
			<view class="trading-today">
				<view class="title">今日交易</view>
				<view class="amount">{{tradingToday.a}}</view>
				<view class="ratio">
					<view class="">{{tradingToday.b}}</view>
					<view class="">{{tradingToday.c}}</view>
				</view>
			</view>
			<view class="chart-tab">
				<view class="tab-area">
					<view class="tab-item" :class="{'active': currentChartIndex == 0}" @click="currentChartIndex=0">分时图
					</view>
					<view class="tab-item" :class="{'active': currentChartIndex == 1}" @click="currentChartIndex=1">日线图
					</view>
					<view class="tab-item" :class="{'active': currentChartIndex == 2}" @click="currentChartIndex=2">周线图
					</view>
					<view class="tab-item" :class="{'active': currentChartIndex == 3}" @click="currentChartIndex=3">月线图
					</view>
					<view class="tab-item" :class="{'active': currentChartIndex == 4}" @click="currentChartIndex=4">近一年
					</view>
				</view>
				<view class="chart-area">
					
				</view>
			</view>
			<view class="account-owner-benefits">
				<view class="account-owner">
					<view class="">户主：</view>
					<view class="money-amount left">
						<view class="title">积存金（美元）</view>
						<view class="amount">{{balance}}$</view>
					</view>
				</view>
				<view class="lower-level-benefits">
					<view class="" @click="openBenefits()">发放下级福利<image src="../../static/images/index-add.png" mode=""></image>
					</view>
					<view class="money-amount right">
						<view class="title">抛出总金额（元）</view>
						<view class="amount">{{throwOutTotalAmount}}￥</view>
					</view>
				</view>
			</view>
			<view class="btn-group">
				<button class="redB" @click="openBuy('up')">买涨</button>
				<button class="greenB" @click="openBuy('down')">买跌</button>
			</view>
		</view>
		<view class="mask" v-show="showMask">
			<view class="exchangeRate-area">
				<view class="">购买汇率</view>
				<image src="../../static/images/index-sign-out.png" @click="showMask = false"></image>
			</view>
			<view class="orderAmount-area">
				<view class="amount-item" 
				:class="{'active': currentAmountIndex == index}" 
				v-for="(item, index) in amountLists" :key="index" 
				@click="currentAmountIndex = index, buyAmount = item, diyAmount = ''">{{item}}</view>
			</view>
			<view v-show="isDiy" class="title">自定义下单金额</view>
			<button v-show="!isDiy" class="diy-btn"
				@click="isDiy=true"
				:class="{'redB': buyStatus == 0, 'greenB':buyStatus == 1}">自定义下单金额</button>
			<view class="info-display-area">
				<view class="info-top-diy" v-show="isDiy">
					<view class="">自定义：</view>
					<input maxlength="14" type="number" @input="inputNum($event)" v-model="diyAmount" />
					<text>$</text>
				</view>
				<view class="info-left">
					<view class="">购买：{{buyAmount}}</view>
					<view class="">合约：美元汇率</view>
					<view class="">订单方向：<text
							:class="{'redF': buyStatus == 0, 'greenF':buyStatus == 1}">{{buyStatus == 1?'买跌':'买涨'}}</text>
					</view>
				</view>
				<view class="info-right">
					<view class="">预期收入：{{expectedRevenue}}$</view>
					<view class="">结算周期：{{period}}秒</view>
					<view class="">当前价格：{{currentPrice}}</view>
				</view>
				<button class="confrim-btn" :class="{'redB': buyStatus == 0, 'greenB':buyStatus == 1}">确认下单</button>
			</view>
		</view>
		<tabbar-diy :isIndex="1"></tabbar-diy>
	</view>
</template>

<script>
	let _self;
	import tabbarDiy from '../../components/tabbar-diy.vue'
	export default {
		data() {
			return {
				isIndex: 1,
				tradingToday: {
					a: '23492460$',
					b: '+88.00',
					c: '+0.66%'
				},
				currentChartIndex: 0,
				balance: '7962',//积存金
				throwOutTotalAmount: '0.00',//抛出总金额
				showMask: false,
				buyStatus: 0, //即将下单的状态，0-买涨，1-买跌
				isDiy: false, //是否自定义
				amountLists: ['10$', '20$', '30$', '50$', '100$', '500$', '1000$', '2000$'],
				currentAmountIndex: -1,
				diyAmount: '',//自定义下单金额
				buyAmount: '',//已填下单金额
				expectedRevenue: '37',//预期收入
				period: '30', //结算周期
				currentPrice: '0',//当前价格

			}
		},
		components: {
			tabbarDiy
		},
		onShow() {
			console.log(11)
		},
		onLoad() {
			_self = this;
		},
		methods: {
			openBuy(str){
				switch (str){
					case 'up': 
						this.buyStatus = 0;
						this.showMask = true;
						this.isDiy = false;
					break;
					case 'down':
						this.buyStatus = 1;
						this.showMask = true;
						this.isDiy = false;
					break;
				}
			},
			inputNum(e){
				this.currentAmountIndex=-1;
				// console.log(e.detail.value)
				// console.log(this.diyAmount);
				this.buyAmount = e.detail.value + '$';
				// console.log(this.buyAmount);
			},
			openBenefits(){
				uni.navigateTo({
					url: '/pages/welfare/welfare'
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		color: #FFFFFF;
		padding-bottom: 137rpx;
	}

	.trading-today {
		width: 100%;
		height: 130rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #212431;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 2px 5px #000;

		.title {
			width: 30%;
			font-size: 29rpx;
		}

		.amount {
			width: 50%;
			text-align: right;
			font-size: 50rpx;
			color: #55DFAB;
		}

		.ratio {
			width: 20%;
			text-align: right;
			font-size: 24rpx;
			color: #FF4545;
		}
	}

	.chart-tab {
		height: 583rpx;
		box-sizing: border-box;
		padding: 24rpx 30rpx;

		.tab-area {
			height: 56rpx;
			display: flex;
			border: 2px solid #456DEA;
			border-radius: 8rpx;
			font-size: 25rpx;
			text-align: center;
		}

		.tab-item {
			width: 20%;
			line-height: 56rpx;
			box-sizing: border-box;
			border-right: 2px solid #456DEA;

			&:nth-of-type(5) {
				border: none;
			}

			&.active {
				background-color: #456DEA;
			}
		}

		.chart-area {}
	}

	.account-owner-benefits {
		width: 100%;
		height: 238rpx;
		background-color: #212431;
		margin-top: 25rpx;
		box-sizing: border-box;
		padding: 30rpx 32rpx;
		display: flex;
		box-shadow: 0 2px 5px #000;

		.account-owner {
			width: 50%;
			font-size: 34rpx;
		}

		.lower-level-benefits {
			width: 50%;
			font-size: 34rpx;
			color: #3365FF;
			text-align: right;

			image {
				width: 34rpx;
				height: 34rpx;
				margin-left: 9rpx;
			}
		}

		.money-amount {
			margin-top: 40rpx;

			.title {
				font-size: 25rpx;
				color: #B9B9BC;
			}

			.amount {
				font-size: 38rpx;
				color: #FF4545;
			}
		}

		.money-amount.left {
			border-right: 2px solid #474761;
		}

		.money-amount.right {
			padding-left: 40rpx;
			text-align: center;
		}
	}

	.btn-group {
		padding-top: 30rpx;
		display: flex;
		justify-content: center;

		button {
			width: 314rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 8rpx;
			font-size: 31rpx;
			color: #FFFFFF;
			padding: 0;
			margin: 0 28rpx;
		}
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 995rpx;
		color: #FFFFFF;
		background-color: rgba($color: #1A1C27, $alpha: 0.9);
		
		.exchangeRate-area {
			padding: 0 30rpx;
			height: 85rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			
			image{
				width: 41rpx;
				height: 38rpx;
			}
		}

		.orderAmount-area {
			margin-top: 26rpx;
			margin: 26rpx 25rpx 0;
			width: 701rpx;
			height: 168rpx;
			background-color: #212431;
			border-radius: 8rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-content: center;
			box-shadow: 0 2px 5px #000;

			.amount-item {
				width: 15%;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				font-size: 24rpx;
				margin: 5rpx 5%;
				border-radius: 8rpx;
				
				&.active{
					background-color: #3365FF;
				}
			}
		}

		.title {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 31rpx;
			text-align: center;
		}

		.diy-btn {
			width: 690rpx;
			height: 64rpx;
			line-height: 64rpx;
			padding: 0;
			color: #FFFFFF;
			font-size: 31rpx;
			margin-top: 26rpx;
			margin-bottom: 20rpx;
		}

		.info-display-area {
			width: 701rpx;
			// height: 369rpx;
			margin: 0 auto;
			padding-top: 20rpx;
			box-sizing: border-box;
			background-color: #212431;
			border-radius: 8rpx;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			font-size: 25rpx;
			line-height: 65rpx;
			box-shadow: 0 2px 5px #000;
			
			.info-top-diy{
				width: 75%;
				margin: 20rpx auto 0;
				display: flex;
				align-items: center;
				
				input{
					width: 372rpx;
					height: 42rpx;
					box-sizing: border-box;
					padding: 0 10rpx;
					font-size: 25rpx;
					border: 1px solid #3365FF;
					border-radius: 8rpx;
					margin-right: 13rpx;
				}
			}
			
			.info-left{
				width: 35%;
				margin-right: 10%;
			}
			.info-right{
				width: 30%;
			}
			
			.confrim-btn{
				width: 484rpx;
				height: 77rpx;
				line-height: 77rpx;
				padding: 0;
				color: #FFFFFF;
				font-size: 31rpx;
				margin: 40rpx 0 60rpx;
			}
		}

	}

	.redF {
		color: #FF4545;
	}

	.greenF {
		color: #55DFAB;
	}

	.redB {
		background-color: #FF4545;
	}

	.greenB {
		background-color: #55DFAB;
	}
</style>
